<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <el-input class="ElInput" v-model="facilityName" placeholder="请输入设备名称"></el-input>
        <el-button icon="el-icon-search" type="primary" @click="list"></el-button>
        <el-button type="info" @click="facilityName = ''">重置</el-button>
        <el-button type="primary" @click="openCreateVisible">添加</el-button>
        <!--表格-->
        <el-table
            :data="tableData"
            height="730"
            border
            style="margin-top: 10px;width: 100%">
          <el-table-column
              prop="facilityName"
              label="设备名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="facilityCode"
              label="设备编号">
          </el-table-column>
          <el-table-column
              prop="brandModel"
              label="设备型号"
              width="180">
          </el-table-column>
          <el-table-column
              prop="faultBack"
              label="维修人员备注">
          </el-table-column>
          <el-table-column
              prop="maintainerPeoplesName"
              label="维修人员名称">
          </el-table-column>
          <el-table-column
              prop="maintainerStatus"
              label="维修状态">
            <template slot-scope="scope">
              <span>{{scope.row.maintainerStatus === 0?'暂未维修':scope.row.maintainerStatus === 1?'已经维修':'无法维修'}}</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              prop="maintainerTime"
              label="维修时间">
          </el-table-column>
          <el-table-column
              prop="address"
              label="操作">
            <template slot-scope="scope">
              <span><el-button type="text" @click="openRemoveWindow(scope.row.id)">删除</el-button></span>
              <span><el-button v-if="scope.row.maintainerStatus === 0" type="text" @click="openOverVisible(scope.row)">审核</el-button></span>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
    <!--分页-->
    <!--添加弹窗-->
    <el-dialog
        title="新建维修工单"
        :visible.sync="createVisible"
        width="30%"
        :before-close="handleClose">
      <!--镶内弹窗-->
      <el-dialog
          width="30%"
          style="margin-top: 60px"
          title="维修设备选择"
          :visible.sync="innerVisible"
          append-to-body>
        <el-input class="ElInput" v-model="facilityCode" placeholder="请输入设备编号"></el-input>
        <el-button icon="el-icon-search" type="primary" @click="listFactility"></el-button>
        <!--表格-->
        <el-table
            :data="facilityTableData"
            tooltip-effect="dark"
            style="width: 100%">
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="createForm.facilityId" :label="scope.row.id"></el-radio>
            </template>
          </el-table-column>
          <el-table-column
              prop="typeName"
              label="设备分类">
          </el-table-column>
          <el-table-column
              prop="facilityCode"
              label="设备编号">
          </el-table-column>
          <el-table-column
              prop="facilityName"
              label="设备名称">
          </el-table-column>
          <el-table-column
              prop="addsName"
              label="维护人员">
          </el-table-column>
        </el-table>
        <el-pagination
            layout="prev, pager, next"
            :total="smallTotal">
        </el-pagination>
        <!--表格-->
        <span slot="footer" class="dialog-footer">
                <el-button @click="innerVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkFaclilty">确 定</el-button>
              </span>
      </el-dialog>
      <!--镶内弹窗-->
      <el-form label-width="100px" class="demo-ruleForm">
        <el-form-item label="维修设备" prop="maintainerPeoples">
          <el-input placeholder="请选择维修设备" v-model="createForm.facilityId" :disabled="true" class="input-with-select">
            <el-button slot="append" @click="openFacilityWindow" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="故障描述" prop="back">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="createForm.faultBack"></el-input>
        </el-form-item>
        <el-form-item label="维修状态" prop="status">
          <el-radio v-model="createForm.maintainerStatus" label="0" value="0">未维修</el-radio>
          <el-radio v-model="createForm.maintainerStatus" label="1" value="1">已维修</el-radio>
          <el-radio v-model="createForm.maintainerStatus" label="2" value="2">无法维修</el-radio>
        </el-form-item>
        <el-form-item label="备注" prop="facilityName">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="createForm.back"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="createVisible = false">取 消</el-button>
        <el-button type="primary" @click="create">建 单</el-button>
      </span>
    </el-dialog>
    <!--添加弹窗-->
    <!--审核窗口-->
    <el-dialog
        title="维修审核"
        :visible.sync="overVisible"
        width="30%"
        :before-close="handleClose">
      <span>维修结果</span>
      <el-select v-model="overForm.maintainerStatus">
        <el-option label="请选择" :value="0"></el-option>
        <el-option label="已维修" :value="1"></el-option>
        <el-option label="无法维修" :value="2"></el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="overVisible = false">取 消</el-button>
    <el-button type="primary" @click="over">审 核</el-button>
  </span>
    </el-dialog>

    <!--审核窗口-->
  </div>
</template>

<script>
export default {
  /*Data*/
  data() {
    return {
      facilityCode: '',
      facilityTableData:[],
      overVisible: false,
      innerVisible: false,
      createForm:{},
      restCreateForm:{},
      tableData:[],
      createVisible: false,
      facilityName:'',
      pageSize: 10,
      pageNum:1,
      total:0,
      smallPageSize: 5,
      smallPageNum: 1,
      smallTotal: 0,
      overForm:{}
    }
  },
  /*自动挂载*/
  mounted() {
    this.list()
  },
  /*函数*/
  methods:{
    /*审核*/
    over(){
      this.$axios.post('/memberZjx/facilityMaintainer/over',this.overForm).then(res => {
        if (res.data.code === 200) {
          this.overVisible = false
          this.MyMessage('审核完成','success')
          this.updateLog('设备维修记录')
          this.list()
        } else {
          this.MyMessage('网络异常','info')
        }
      })
    },
    /*打开审核窗口*/
    openOverVisible(data){
      this.overForm = data
      this.overVisible = true
    },
    /*新增*/
    create(){
      this.$axios.post('/memberZjx/facilityMaintainer/create',this.createForm).then(res => {
        if (res.data.code === 200) {
          this.createVisible = false
          this.MyMessage('添加成功','success')
          this.insertLog('设备维修记录')
          this.list()
        } else {
          this.MyMessage('网络异常','info')
        }
      })
    },
    /*选择设备*/
    checkFaclilty(){
      this.innerVisible = false
    },
    /*嵌套内弹窗查询*/
    listFactility(){
      this.$axios.get('/memberZjx/FacilityPublic/list',{
        params:{
          facilityCode:this.facilityCode,
          pageSize: this.smallPageSize,
          pageNum: this.smallPageNum
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.facilityTableData = res.data.obj.content
          this.smallTotal = res.data.obj.total
        } else {
          this.MyMessage('网络异常','info')
        }
      })
    },
    /*打开嵌套弹窗*/
    openFacilityWindow(){
      this.listFactility()
      this.innerVisible = true
    },
    /*删除提醒*/
    openRemoveWindow(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove(id)
      }).catch(() => {
        this.MyMessage('取消删除','info')
      });
    },
    /*删除维修记录*/
    remove(id){
      this.$axios.post('memberZjx/facilityMaintainer/remove/'+id).then(res => {
        if (res.data.code === 200) {
          this.MyMessage('删除成功','success')
          this.deleteLog('设备维修记录')
          this.list()
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*打开添加窗口*/
    openCreateVisible(){
     this.createForm =  this.restCreateForm
      this.createVisible = true
    },
    /*全查*/
    list(){
      this.$axios.get('memberZjx/facilityMaintainer/list',{
        params:{
          facilityName: this.facilityName,
          checkType: this.checkType,
          pageNum: this.pageNum,
          pageSize:this.pageSize
        }
      }).then(res => {
        if (res.data.code === 200){
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.list()
    },
    handleClose(done) {
      done()
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>